<template>
	<view>
		
		<!-- <view class="breakLine"></view> -->
		
		<view class="card">
			<view>
				<view class="btnTop">发现隐患内容</view>
			</view>
			<!-- <view class="title">隐患信息</view> -->
			<view class="row">
				<view class="left">隐患位置</view>
				<view class="right">
					<input type="text" v-model="position" placeholder="请输入">
				</view>
			</view>
			<view class="row">
				<view class="left">隐患类别</view>
				<view class="right">
					<picker @change="YHDLChange" :value="YHDLIndex" :range="getDangerCartByList" range-key="name">
							<view class="uni-input">{{getDangerCartByList[YHDLIndex].name}}</view>
						</picker>
				</view>
			</view>
			<view class="row">
				<view class="left">风险名称</view>
				<view class="right">
					<input type="text" v-model="title" placeholder="请输入">
				</view>
			</view>
			<view class="row">
				<view class="left">发现日期</view>
				<view class="right">{{addtime}}</view>
			</view>
			<view class="row">
				<view class="left">随手拍</view>
				<view class="right">
					<view class="upimg">
						<image v-for="(item,index) in picsarr" :key='index' :src="item" mode=""></image>
						<image src="../../static/fengxianxuncha.1/jia.png" @click="updatafile" mode=""></image>
					</view>	
				</view>
			</view>
			<view class="row">
				<view class="left">隐患描述</view>
				<view class="right">
					<textarea v-model="description" placeholder="隐患描述" />
				</view>
			</view>
			<view class="row">
				<view class="left">发现人员</view>
				<view class="right"></view>
			</view>
			<view class="row">
				<view class="left">姓名</view>
				<view class="right"><input type="text" v-model="find_username"  /></view>
			</view>
			<view class="row">
				<view class="left">手机号码</view>
				<view class="right"><input type="text" v-model="find_userphone" /></view>
			</view>
			<view class="navgater" @click="fxsspsave">提交</view>
			<view style=" height: 1upx"></view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				getDangerCartByList : [],
				YHDLIndex:0,
				fxpointid:'',//扫一扫获取的id
				position:'随手拍',//位置描述
				title:'',//风险名称
				addtime:'',//发现日期
				pics:[],//上传的图片
				description:'',//描述
				find_username:'',//发现的人名
				find_userphone:'',//发现的人的电话
				cart:'',
				picsarr:[],
			}
		},
		onLoad(option) {
			this.getDangerCartBy();
			this.addtime = this.getNowTime();
			
			this.position = '随手拍';
			if(option.id){
				uni.setStorageSync("ssp_point",option.id);
				this.fxpointid = option.id;
				this.position = option.position;
			}else{
				this.fxpointid = uni.getStorageSync("ssp_point");
				this.position = uni.getStorageSync("position");
			}
		},
		methods:{
			// 提交接口
			fxsspsave(){
				console.log(this.find_username,this.find_userphone)
				if(!this.find_username&&!this.find_userphone){
					uni.showToast({
						title:"请输入您的名字和电话",
						icon:'none'
					})
					return false;
				}
				var _this = this;
				uni.request({
					url:this.$API.fxsspsave,
					data:{
						'fxssp.fxpointid'     :this.fxpointid,//扫一扫获取的id
						'fxssp.position'      :this.position,//位置描述
						'fxssp.title'         :this.title,//风险名称
						'fxssp.addtime'       :this.addtime,//发现日期
						'fxssp.pics'          :this.pics.join(","),
						'fxssp.description'   :this.description,//描述
						'fxssp.find_username' :this.find_username,//发现的人名
						'fxssp.find_userphone':this.find_userphone,//发现的人的电话
						'fxssp.cart'          :this.cart
					},
					method:"GET",
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.success){
							uni.showModal({
							    title: '提示',
							    content: '提交成功',
							    success: function (res) {
							        _this.title='';//风险名称
							        _this.addtime='';//发现日期
							        _this.pics=[];//上传的图片
							        _this.description='';//描述
							        _this.find_username='';//发现的人名
							        _this.find_userphone='';//发现的人的电话
							        _this.cart='';
							        _this.picsarr=[];
							    }
							});
						}else{
							uni.showToast({
								title:"提交失败",
								icon:'none'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//上传图片
			updatafile(){
				var _this = this;
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: ["compressed"],
					// count: 1,
					success: (res) => {
						res.tempFilePaths.forEach(function(item,index){
							uni.uploadFile({
								url: _this.$API.upload,
								name: 'file',
								filePath: item,
								success: function(res) {
									res.data = JSON.parse(res.data);
									_this.picsarr.push(item);
									_this.pics.push(res.data.fileName);
								},
								fail: function(res) {
									uni.showToast({
										title:"上传失败",
										icon:'none'
									})
								}
							});
						})
						
					}
				});
			},
			// 获取隐藏类别
			getDangerCartBy(){
				var _this = this;
				uni.request({
					url:this.$API.getDangerCartBy,
					data:{
						type:'top'
					},
					method:"GET",
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.success){
							_this.getDangerCartByList =res.data.data;
							_this.cart = _this.getDangerCartByList[0].name
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			YHDLChange(e){
				this.YHDLIndex = e.target.value;
				this.cart = this.getDangerCartByList[this.YHDLIndex].name
			},
			//获取时间
			getNowTime() {
			            // 加0
			            function add_10(num) {
			                if (num < 10) {
			                    num = '0' + num
			                }
			                return num;
			            }
			            var myDate = new Date();
			            myDate.getYear(); //获取当前年份(2位)
			            myDate.getFullYear(); //获取完整的年份(4位,1970-????)
			            myDate.getMonth(); //获取当前月份(0-11,0代表1月)
			            myDate.getDate(); //获取当前日(1-31)
			            myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
			            myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
			            myDate.getHours(); //获取当前小时数(0-23)
			            myDate.getMinutes(); //获取当前分钟数(0-59)
			            myDate.getSeconds(); //获取当前秒数(0-59)
			            myDate.getMilliseconds(); //获取当前毫秒数(0-999)
			            myDate.toLocaleDateString(); //获取当前日期
			            var nowTime = myDate.getFullYear() + '-' + add_10(myDate.getMonth()+1) + '-' + add_10(myDate.getDate()) + ' ' + add_10(myDate.getHours()) + ':' + add_10(myDate.getMinutes()) + ':' + add_10(myDate.getSeconds());
			            return nowTime;
			        }
		}
	}
</script>

<style>
	/* #ifdef H5 */
		page{
			overflow: auto;
		}
	/* #endif */
	.navgater {
		width: 300upx;
		border-radius: 60upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		background-color: #067AEE;
		margin: 30upx auto 50upx;
	
	}

	.btnTop{
		background:#ce0402;
		padding:5upx 10upx;
		display: inline-block;
		border-radius:10upx;
		margin:10upx 20upx;
		color:#FFFFFF;
	}
	.card{background:#FFFFFF;padding-top:20upx;}
	.breakLine{background:#ececec;height: 30upx;}
	.title{font-size:50upx;padding:20upx 40upx;border-bottom: 1px solid #ccc;}
	.row{
		font-size: 32upx;
		padding: 15upx 40upx;
		display: flex;
		/* border-bottom: 1px solid #ccc; */
	}
	.row .left{width:200upx;min-width:200upx;}
	.row .right{width:100%;}
	.right input {
		border-bottom: 1px solid #ccc;
	}
	.buts{
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		padding-bottom:30upx;
	}
	button{
		color: #FFFFFF;
		width: 280upx;
		height: 70upx;
		line-height: 70upx;
		margin: 30upx 30upx 0;
		border-radius: 10upx;
		display: inline-block;
		font-size: 28upx;
	}
	textarea{
		width:100%;
		height:240upx;
		border:1upx solid #CCCCCC;
		border-radius:10upx;
	}
	.upimg{
		display: flex;
		width:100%;
		flex-flow: wrap;
	}
	.upimg image{
		width:140upx;
		min-width: 140upx;
		height:140upx;
		margin-right:20upx;
		margin-bottom:20upx;
		border-radius:10upx;
	}
	.upimg image:nth-child(3n){
		margin-right:0;
	}
	picker .uni-input{color: #007AFF;padding: 0;}
</style>
